<template>
  <div class="classift-list-wrap">
        <template>
            <el-table :data="tableData" stripe border>
                <el-table-column prop="_id" label="ID" style="width: 33.3%" align="center"></el-table-column>
                <el-table-column prop="title" label="分类名称" style="width: 33.3%" align="center"></el-table-column>
                <el-table-column label="操作" style="width: 33.3%">
                    <template slot-scope="scope" align="center">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
  </div>
</template>

<script>
import { getGoodsClassify, deleteGoodsClassify } from '../../utils/api/goods'
export default {
    name: 'classifyList',
    data () {
        return {
            tableData: []
        }
    },
    created() {
        this.getList()
    },
    methods: {
        // 获取商品列表
        async getList () {
            let res = await getGoodsClassify()
            this.tableData = res.items
            // console.log(res)
        },
        // 编辑
        handleEdit (index, row) {
            this.$router.push({
               path:  `/goodsClassify/${row._id}` 
            })
        },
        // 删除
        async handleDelete (index, row) {
            let res = await deleteGoodsClassify(row._id)
            if (res.code === 200) {
                this.$message({
                    message: '删除成功',
                    type: 'success'
                })
                this.getList()
            }
        }
    }
}
</script>

<style scoped lang="less">
    .el-table {
        width: 60%;
        // margin: auto;
        /deep/.el-table__empty-block {
            width: 100%!important;
        }
    }
</style>